<template>
	<view class="chat" v-if="conversation.conversationID">
		<view class="chat-box">
			<view class="left">
				<image :src="setConversationAvatar" mode=""></image>
				<view class="origin" v-if="conversation.unreadCount > 99">99+</view>
				<view class="origin" v-if="conversation.unreadCount < 99 && conversation.unreadCount > 0">{{ conversation.unreadCount }}</view>
			</view>
			<view class="right">
				<view class="first">
					<view class="name">{{ conversationName }}</view>
					<view class="time">{{ timeago }}</view>
				</view>
				<view class="tui-conversation-lastMessage">
					<text>{{ conversation.lastMessage.messageForShow }}</text>
				</view>
				<!-- <view :class="{'red':item.text == '[语音]','center':item.text !='[语音]'}">{{item.text}}</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import { caculateTimeago } from '../base/common';
export default {
	name: 'msgList',
	props: {
		conversation: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			xScale: 0,
			conversationName: '',
			conversationAvatar: '',
			setConversationAvatar: '',
			timeago: ''
		};
	},
	watch: {
		conversation: {
			handler: function(conversation) {
				// 计算时间戳
				this.conversationName = this.getConversationName(conversation);
				this.setConversationAvatar = this.setConversationAvatarHandler(conversation);
				this.timeago = caculateTimeago(conversation.lastMessage.lastTime * 1000);

				this.$updateTimeago(conversation);
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		// 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID
		getConversationName(conversation) {
			if (conversation.type === '@TIM#SYSTEM') {
				return '系统通知';
			}

			if (conversation.type === 'C2C') {
				return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID;
			}

			if (conversation.type === 'GROUP') {
				return conversation.groupProfile.name || conversation.groupProfile.groupID;
			}
		},

		setConversationAvatarHandler(conversation) {
			if (conversation.type === '@TIM#SYSTEM') {
				return 'https://web.sdk.qcloud.com/component/TUIKit/assets/system.png';
			}

			if (conversation.type === 'C2C') {
				return conversation.userProfile.avatar || 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png';
			}

			if (conversation.type === 'GROUP') {
				return conversation.groupProfile.avatar || this.$base_url+'/static/index/gruopavatar.svg';
			}
		},

		deleteConversation() {
			uni.showModal({
				content: '确认删除会话？',
				success: res => {
					if (res.confirm) {
						uni.$TUIKit.deleteConversation(this.conversation.conversationID);
						this.conversation={};
						this.xScale=0;
					}
				}
			});
		},

		handleTouchMove(e) {
			if (!this.lock) {
				this.last = e.detail.x;
				this.lock = true;
			}

			if (this.lock && e.detail.x - this.last < -5) {
				this.xScale = -75;
				setTimeout(() => {
					this.lock = false;
				}, 2000);
			} else if (this.lock && e.detail.x - this.last > 5) {
				this.xScale = 0;
				setTimeout(() => {
					this.lock = false;
				}, 2000);
			}
		},
		$updateTimeago(conversation) {
			if (conversation.conversationID) {
				// conversation.lastMessage.timeago = caculateTimeago(conversation.lastMessage.lastTime * 1000);
				conversation.lastMessage.messageForShow = conversation.lastMessage.messageForShow.slice(0, 15);
			}
			this.conversation = conversation;
		}

		// handleImageError() {
		// 	this.setData({
		// 		setConversationAvatar: '/static/static/assets/gruopavatar.svg'
		// 	});
		// }
	}
};
</script>

<style lang="stylus" scoped>
.chat
	width 650rpx
	height 130rpx
	margin 30rpx auto
	.chat-box
		width 100%
		height 100%
		display flex
		justify-content space-between
		.left
			width 120rpx
			height 120rpx
			position relative
			image
				width 120rpx
				height 120rpx
				border-radius 10px
			.origin
				position absolute
				top -5px
				right -5px
				width 28rpx
				height 28rpx
				line-height 28rpx
				text-align center
				background #FB0D1C
				border-radius 50%
				font-size 24rpx
				font-family PingFang SC
				font-weight 400
				color #FFFFFF
		.right
			width 550rpx
			height 100%
			margin-left 30rpx
			border-bottom 1px solid #ccc
			.first
				display flex
				justify-content space-between
				.name
					font-size 32rpx
					font-family PingFang SC
					font-weight 500
					color #333333
				.tiem
					font-size 24rpx
					font-family Source Han Sans CN
					color #333333
			.center
				font-size 28rpx
				font-family Source Han Sans CN
				color #333333
				margin-top 10rpx
				
				
			.tui-conversation-lastMessage {
			  line-height: 40rpx;
			  font-size: 28rpx;
			  font-family: 'PingFangSC-Regular';
			  color: #999999;
			  max-width: 90%;
			  text-overflow: ellipsis;
			  white-space: nowrap;
			  overflow: hidden;
			}
</style>
